<template>
    <div class="infolist">
        <div class="queryAndAdd">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="姓名">
                    <el-input v-model="formInline.name" placeholder="请输入领养人姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryName(formInline.name)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline" size="middle">
                <el-form-item>
                    <el-button type="primary" @click="addStudent">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="sliceData" border style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center">
            </el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
            </el-table-column>
            <el-table-column prop="occupation" label="职业" align="center">
            </el-table-column>
            <el-table-column prop="address" label="家庭住址" align="center">
            </el-table-column>
            <el-table-column prop="time" label="领养动物时间" align="center">
            </el-table-column>
            <el-table-column prop="animal" label="领养动物昵称" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">    
                    <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="edit(scope.row)"></el-button>
                    <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="del(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            :title="state?'添加领养人信息':'修改领养人信息'"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
            <el-form :model="formAdd" :rules="rules" ref="form" :label-position="labelPosition" label-width="85px">
                <el-form-item label="姓名:" prop="name">
                    <el-input v-model="formAdd.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄:" prop="age">
                    <el-input v-model="formAdd.age" type="number"></el-input>
                </el-form-item>
                <el-form-item label="性别:" prop="sex">
                    <el-radio v-model="formAdd.sex" label="1">男</el-radio>
                    <el-radio v-model="formAdd.sex" label="2">女</el-radio>
                </el-form-item>
                <el-form-item label="职业:" prop="occupation">
                    <el-input v-model="formAdd.occupation"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址:" prop="address">
                    <el-input v-model="formAdd.address"></el-input>
                </el-form-item>
                <el-form-item label="领养时间:" prop="time">
                    <el-input v-model="formAdd.time" type="date"></el-input>
                </el-form-item>
                <el-form-item label="领养动物:" prop="animal">
                    <el-input v-model="formAdd.animal"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:" prop="phone">
                    <el-input v-model="formAdd.phone"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure('form')">确 定</el-button>
            </span>
        </el-dialog>
        <div class="pagination">
            <el-card>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[7,10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalpage">
                </el-pagination>
            </el-card>
        </div>
    </div>
</template>
<script>
import {adopter,getAdopter,adopterDel,adopterEdit} from '@/api/api'
export default {
    data() {
        return{
            currentPage:1,
            totalpage:0,
            pageSize:7,
            formInline:{
                name:''
            },
            tableData:[],
            total:0,
            centerDialogVisible:false,
            formAdd:{
                name:'',
                age:'',
                sex:'1',
                occupation:'',
                address:'',
                time:'',
                animal:'',
                phone:'',
                formId:''
            },
            loading:true,
            labelPosition:'right',
            rules:{
                name:[{required:true,message:'请输入姓名'}],
                // sex:[{required:true}],
                // age:[{required:true,message:'请输入年龄'}],
                // address:[{required:true,message:'请输入地址'}],
                // time:[{required:true,message:'请输入入学时间'}],
                // phone:[{required:true,message:'请输入手机号'}],
            },
            state:true
        }
    },
    created(){
        this.getData()
    },
    computed:{
        sliceData(){
            return this.tableData.slice((this.currentPage-1)*this.pageSize,(this.currentPage)*this.pageSize)
        }
    },
    methods:{
        getData(){
            getAdopter().then(res=>{
                if(res.data.status==200){
                    this.tableData=res.data.data
                    this.totalpage=res.data.total
                    this.tableData.filter(item=>{
                        if(item.sex==1){
                            return item.sex='男'
                        }else{
                            return item.sex='女'
                        }
                    })
                    this.total=res.data.total
                    this.loading=false
                }
            })
        },
        edit(row){
            let charSex=''
            console.log(row);
            this.state=false
            this.centerDialogVisible=true
            //this.formAdd=row //直接赋值会出现未点击确定而实时更新数据bug，实际数据未更新
            if(row.sex=='男'){
                charSex='1'
            }else{
                charSex='2'
            }
            this.formAdd={...row}
            this.formAdd.sex=charSex
            this.formAdd.formId=row._id
        },
        del(row){
            this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning',
            }).then(()=>{
                //console.log(row._id);
                adopterDel(row._id).then(res=>{
                    if(res.data.status==200){
                        this.$message({message:'删除成功',type:'success'})
                    }
                    this.getData()
                })
            }).catch(()=>{
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                }); 
            })
        },
        addStudent(){
            this.formAdd={
                name:'',
                age:'',
                sex:'1',
                occupation:'',
                address:'',
                time:'',
                animal:'',
                phone:'',
            }
            this.state=true
            this.centerDialogVisible=true
        },
        sure(form){
            this.$refs[form].validate(valid=>{
                if(valid){
                    console.log(this.formAdd);
                    if(this.state){
                        adopter(this.formAdd).then(res=>{
                        console.log(res);
                        if(res.data.status==200){
                            //this.tableData=res.data.data
                            this.getData()
                            this.centerDialogVisible=false
                            this.$message({message:res.data.message,type:'success'})
                        }
                    })
                    }else{
                        adopterEdit(this.formAdd.formId,this.formAdd).then(res=>{
                        console.log(this.formAdd.formId);
                        console.log(this.formAdd.imgPath);
                        if(res.data.status==200){
                            //this.tableData=res.data.data
                            this.getData()
                            this.centerDialogVisible=false
                            this.$message({message:res.data.message,type:'success'})
                        }
                    })
                    }
                }
            })
        },
        queryName(name){
            console.log(name);
            this.tableData=this.tableData.filter(item=>item.name==name)
            this.currentPage=1
            console.log(this.tableData);
        },
        reset(){
            this.formInline={}
            this.getData(this.formInline)
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize=Number(`${val}`)
            //this.getData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage=Number(`${val}`)
            //this.getData()
        },

    }
}
</script>
<style lang="scss" scoped>
.infolist{
    // position: relative;
    .queryAndAdd{
        display: flex;
        justify-content: space-between;
    }
    .demo-form-inline{
        text-align: right;
    }
    .pagination{
        position: absolute;
        // top: 503px;
        bottom: 0px;
        width: 83.5%;
        
        .el-card{
            height: 90%;
        }
    }
}

</style>